package ;

import com.grouuu.asset.Asset;
import com.grouuu.data.MapData;
import com.grouuu.layer.LayerGround;
import com.grouuu.media.LoadMedia;
import com.grouuu.world.World;
import js.Browser;
import js.html.BodyElement;
import js.html.CanvasElement;
import js.html.DivElement;
import js.html.Document;
import js.html.Element;
import js.html.Event;
import js.html.ImageElement;
import js.Lib;

/**
 * ...
 * @author Grouuu
 */

class Main 
{
	private var loader:LoadMedia;
	private var layerGround:LayerGround;
	private var asset:Asset;
	private var world:World;
	
	static function main() 
	{
		new Main();
	}
	
	public function new()
	{
		init();
	}
	
	// INIT ///////////////////////////////////////////////////////////////////////////////////////
	
	private function init():Void
	{
		asset = new Asset();
		
		loader = new LoadMedia();
		
		loadMapImage();
	}
	
	private function initScene():Void
	{
		var document:Document = Browser.document;
		var container:DivElement = cast document.getElementById("container");
		
		var canvasGround:CanvasElement = document.createCanvasElement();
		var canvasHero:CanvasElement = document.createCanvasElement();
		var canvasInterface:CanvasElement = document.createCanvasElement();
		
		canvasGround.width = 608;
		canvasGround.height = 800;
		
		canvasHero.width = 608;
		canvasHero.height = 800;
		
		canvasInterface.width = 608;
		canvasInterface.height = 800;
		
		container.appendChild(canvasGround);
		container.appendChild(canvasHero);
		container.appendChild(canvasInterface);
		
		layerGround = new LayerGround(canvasGround, asset);
		//
		
		asset.mapData.setMap(asset.mapImage);
		
		world = new World();
		
		world.addLayer(layerGround);
		
		world.start();
		
		/**
		 * • faire image où 1px est une couleur qui correspond à une tile
		 * • la mettre dans un canvas caché
		 * • pick la couleur pour savoir quoi afficher
		 * • un layer pour le sol
		 * • un layer pour le héros, les monstres, les items, etc.
		 * • un layer pour le décor ("derrnière" lesquels le héros peut être planqué)
		 * • pour chaque tile, définir si elle est traversable
		 * • déplacer un rectangle (la zone affichée) sur le canvas du sol et du décor, pour définir la zone de pick
		 * • changer l'origine des draw puis replacer cette origine quand la largeur d'une tile est dépassée
		 */
	}
	
	// LOAD ///////////////////////////////////////////////////////////////////////////////////////
	
	private function loadMapImage():Void
	{
		loader.loadMapImage(onMapImageLoaded, onLoadError);
		loader.loadMapData(onMapDataLoaded, onLoadError);
	}
	
	// EVENT //////////////////////////////////////////////////////////////////////////////////////
	
	private function onMapImageLoaded(img:ImageElement):Void
	{
		asset.mapImage = img;
		
		if (asset.isReady())
			initScene();
	}
	
	private function onMapDataLoaded(data:MapData):Void
	{
		asset.mapData = data;
		
		if (asset.isReady())
			initScene();
	}
	
	private function onLoadError(message:String):Void
	{
		trace(message);
	}
}